<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/9/11 0011
  Time: 20:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fnt" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<%
	String path = request.getContextPath();
	pageContext.setAttribute("path", path);
%>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title>问题类型管理</title>
<link rel="stylesheet" href="/manage/css/static/question-type/questionmain.css">
<link rel="stylesheet" href="/manage/css/static/question-type/zTreeStyle.css">
<script src="/manage/js/lib/question-type/jquery-3.4.1.min.js"></script>
<script src="/manage/js/lib/question-type/jquery.ztree.core.min.js"></script>
<script src="/manage/js/lib/question-type/jquery.ztree.excheck.min.js"></script>
<script src="/manage/js/lib/question-type/test-1.1.js"></script>
<script type="text/javascript" src="/manage/js/lib/laypage/1.2/laypage.js"></script>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="/manage/js/lib/layer/2.4/layer.js"></script>
<!--/_footer 作为公共模版分离出去-->
</head>
<style type="text/css">
	.right{
		float: left;width: 600px;margin-left: 10px;
	}
	.right ul{
		margin-left: 50px;margin-bottom: 10px;
	}
	.right ul li{
		margin-left: 20px;margin-top:30px;list-style: none;font-size: 18px;
	}
	.right ul li img{
		width: 20px;
		height: 20px;
	}
</style>
<body>
<div style="float: left">
	<h1 style="text-align: center;color: #3b4249;">下方选择问题类型</h1>
	<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
	<h2 style="text-align: center">添加问题</h2>
	<ul>
		<li>选中的问题类型为:
			<input type="hidden" class="hidden-id"/>
			<input type="text" class="choice-type" disabled/>
		</li>
		<li>
			选择问题类别:
				<c:forEach items="${categorys}" var="category" varStatus="stat">
					<input class="checkCategory" type="radio" name="categoryId" value="${category.id}" id="check${stat.count}">
					<label for="check${stat.count}">${category.categoryName}</label>
				</c:forEach>
		</li>

		<!--选中单选题选项-->
		<li class="singleSelect" style="display: none;">
			<form class="addQuestion" method="post" action="#">
				<input type="hidden" class="type" name="questionId">
				<input type="hidden" class="category" name="categoryId">
				<div>问题:
					<span>
						<textarea style="width: 400px;height: 20px;" placeholder="请输入问题题目" class="subject" name="subject"></textarea>
						<a href="javascript:void(0);" class="update"><img src="/manage/images/picture/update.png"></a>
					</span>
				</div><br>
				<span>
					添加解析:
					<textarea style="width: 400px;height: 50px;" placeholder="请输入问题的解析" class="explain" name="explain"></textarea>
						<a href="javascript:void(0);" class="updateExplain"><img src="/manage/images/picture/update.png"></a>
				</span><br><br>
				<span class="tianjia">
				添加选项
				<img id="addAnswerSingle" src="/manage/images/picture/addmessage.png">
				</span>
				<div>
					<span>
					选项:<textarea style="width: 400px;height: 20px;" placeholder="请添加题目选项" class="answer" name="answer"></textarea>
							<a href="javascript:void(0);" class="updateAnswer"><img src="/manage/images/picture/update.png"></a>
						<br><br>
					</span>
					<span>此选项标记为正确答案:<input type="radio" class="checked" name="singleRadio">
						<span style="margin-left: 200px;">
							继续添加:
							<a href="javascript:void(0);" class="addSingleAnswer"><img src="/manage/images/picture/addmessage.png"></a>
						</span>
					</span>
				</div><br><br>
				<span style="margin-left: 250px;"><button class="tijiao">提交</button></span>
			</form>
		</li>


		<!--选中判断题选项-->
		<li class="judgeSelect" style="display: none;">
			<form class="addQuestion" method="post" action="#">
				<input type="hidden" class="type" name="questionId">
				<input type="hidden" class="category" name="categoryId">
				<div>问题:
					<span>
						<textarea style="width: 400px;height: 20px;" placeholder="请输入问题题目" class="subject" name="subject"></textarea>
						<a href="javascript:void(0);" class="update"><img src="/manage/images/picture/update.png"></a>
					</span>
				</div><br>
				<span>
					添加解析:
					<textarea style="width: 400px;height: 50px;" placeholder="请输入问题的解析" class="explain" name="explain"></textarea>
						<a href="javascript:void(0);" class="updateExplain"><img src="/manage/images/picture/update.png"></a>
				</span><br><br>
				<span class="tianjia">
				添加选项
					<img id="addAnswerJudge" src="/manage/images/picture/addmessage.png">
				</span><br><br>
				<span>
					选项一:<textarea value="正确" placeholder="正确" class="answer" name="answer" style="width: 50px;height:20px;color: white;resize:none;background-color: #376B29;text-align: center;" disabled>正确</textarea>
				<span style="margin-left: 150px;">此选项标记为正确答案:<input type="radio" name="judgeRadio" class="checked"></span>
			</span>
				<br><br>
				<span>
					选项一:<textarea value="错误" placeholder="错误" class="answer" name="answer" style="width: 50px;height:20px;color: white;resize:none;background-color: #A60000;text-align: center;" disabled>错误</textarea>
				<span style="margin-left: 150px;">此选项标记为正确答案:<input type="radio" name="judgeRadio" class="checked"></span>
			</span>
				<br><br>
				<span style="margin-left: 250px;"><button class="tijiao">提交</button></span>
			</form>
		</li>



		<!--选中多选题选项-->
		<li class="multipleChoice" style="display: none;">
			<form class="addQuestion" method="post" action="#">
				<input type="hidden" class="type" name="questionId">
				<input type="hidden" class="category" name="categoryId">
				<div>问题:
					<span>
						<textarea style="width: 400px;height: 20px;" placeholder="请输入问题题目" class="subject" name="subject"></textarea>
						<a href="javascript:void(0);" class="update"><img src="/manage/images/picture/update.png"></a>
					</span>
				</div><br>
				<span>
					添加解析:
					<textarea style="width: 400px;height: 50px;" placeholder="请输入问题的解析" class="explain" name="explain"></textarea>
						<a href="javascript:void(0);" class="updateExplain"><img src="/manage/images/picture/update.png"></a>
				</span><br><br>
				<span class="tianjia">
				添加选项
					<img id="addAnswerMultiple" src="/manage/images/picture/addmessage.png">
				</span>
				<div>
					<span>
					选项:<textarea style="width: 400px;height: 20px;" placeholder="请输入题目选项" class="answer" name="answer"></textarea>
						<a href="javascript:void(0);"><img src="/manage/images/picture/update.png" class="updateAnswer"></a>
						<br><br>
					</span>
					<span>此选项标记为正确答案:<input type="checkbox" class="checked"/>
						<span style="margin-left: 200px;">
							继续添加:
							<a href="javascript:void(0);" class="addMultipleAnswer"><img src="/manage/images/picture/addmessage.png"></a>
						</span>
					</span>
				</div>
				<span style="margin-left: 250px;"><button class="tijiao">提交</button></span>
			</form>
		</li>
	</ul>
</div>
</body>
</html>
<script>
	$(function () {
		//zTree的配置
		var setting = {
			view: {
				selectedMulti: false
			},
			edit: {
				enable: true,
				editNameSelectAll: true,
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				onClick:zTreeOnClick, //点击选中事件　
			}
		};
		//zTree初始化加载的节点树

		var zNodes =[
			<c:forEach items="${questionTypeList}" var="questionType" varStatus="stat">
			{id:${questionType.id},pId:${questionType.pId},name:"${questionType.name}", open:true},
			</c:forEach>
		];

		var log, className = "dark";
		function zTreeOnClick(event, treeId, treeNode) {
			var name=treeNode.name;
			var id=treeNode.id;
			var pid=treeNode.pId;
			if(id!=1&&pid!=1){
				$(".choice-type").val(name);
				$(".hidden-id").val(id);
			}
		}

		$(function(){ //初始化加载树bai
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);  //加载树节点信息
			var zTree=$.fn.zTree.getZTreeObj("treeDemo");
		});
	})

</script>